import React from "react";
import { connect } from 'react-redux';
import {fromJS} from 'immutable';
import { actionCreators } from '../store';
import { ReadpageWrap, SetShowWrap } from '../style'
import { Modal  } from 'antd-mobile';
class Readpage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            showDom: true,
            setShow: false,
            fontSize: "14px",
            backgroundColor: "#adc8a9"
        }
        this.setshowDom = this.setshowDom.bind(this);
        this.stateSetShow = this.stateSetShow.bind(this);
        this.modalClose = this.modalClose.bind(this)
    }
    stateSetShow() {
        this.setState({ "setShow": true, 'showDom': false })
    }
    setshowDom() {
        let { showDom } = this.state;
        this.setState({ "showDom": !showDom })
    }
    modalClose() {
        this.setState({ "setShow": false })
    }
    headerDom() {
        return <div className="header">
            <div className="jt">
            </div>
            <div className="item">
                <span>更多</span>
            </div>
        </div>
    }
    footerDom() {
        return <div className="footer">
            <div className="item" onClick={this.stateSetShow}>
                <span>设置</span>
            </div>
            <div className="item">
                <span>下载</span>
            </div>
            <div className="item">
                <span>目录</span>
            </div>
        </div>
    }
    setsx(key, val) {
        console.log(key, val)
        let obj = {
            "setShow": false
        };
        obj[key] = val;
        this.setState(obj)
    }
    setShow() {
        return <>
            <Modal
                popup
                visible={this.state.setShow}
                onClose={this.modalClose}
                animationType="slide-up"
                afterClose={() => { }}
            >
                <SetShowWrap>
                    <p className="fontSize">
                        <span className="span" onClick={() => this.setsx('fontSize', "16px")}>16px</span>
                        <span className="span" onClick={() => this.setsx('fontSize', "18px")}>18px</span>
                    </p>
                    <p className="bgwrap">
                        <span className="bgitem adc8a9" style={{ background: '#adc8a9' }} onClick={() => this.setsx('backgroundColor', "#adc8a9")}></span>
                        <span className="bgitem" style={{ background: '#c7c5c5' }} onClick={() => this.setsx('backgroundColor', "#c7c5c5")}></span>
                    </p>
                </SetShowWrap>
            </Modal>
        </>
    }
    render() {
        let { showDom, backgroundColor, fontSize } = this.state;
        return (<ReadpageWrap showDom={showDom} style={{ fontSize, backgroundColor }}>
            {showDom ? this.headerDom() : ""}
            <div onClick={this.setshowDom} style={{ height: '1000px' }}>   我是小说内容</div>
            {showDom ? this.footerDom() : ""}
            {this.setShow()}
        </ReadpageWrap>);
    }
    componentDidMount() {
    }
}
const mapStateToProps = (state, ownProps) => {
    state= fromJS(state);
    return {
        collectNoverById: state.getIn(["novel", "collectNoverById"]).toJS(),
    };
};
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        getcollectNoverByIdList(cBId) {
            dispatch(actionCreators._getcollectNoverByIdList(cBId))
        },
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(Readpage);
